<!--
 * @Author: your name
 * @Date: 2021-09-15 09:15:10
 * @LastEditTime: 2021-09-15 16:22:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\6-jQuery\day04\1-canvas.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-canvas</title>
    <script src="../js/jquery.js"></script>
</head>

<body>
    <div id="app">
        <canvas id="canvas" width="300" height="300"></canvas>
    </div>
</body>
<script>
    //找到dom节点
    var canvas = $("#canvas")[0];
    //检查浏览器是否支持canvas
    if (canvas.getContext) {
        //创建画笔 这里为2d图形
        var ctx = canvas.getContext("2d");
        // ctx.beginPath();
        // ctx.moveTo(75, 50);
        // ctx.lineTo(100, 75);
        // ctx.lineTo(100, 25);
        //实心 fill()
        // ctx.fill();
        //不要实心,空心三角形
        // ctx.closePath();
        // ctx.stroke();
        //绘制五角星
        ctx.beginPath();
        ctx.moveTo(70, 45);
        //ctx.lineTo(50, 80);
        // ctx.lineTo(50, 80);
        // ctx.lineTo(10, 80);
        // ctx.lineTo(40, 110);
        // ctx.lineTo(30, 155);
        // ctx.lineTo(70, 120);
        // ctx.lineTo(100, 160);
        // ctx.lineTo(95, 112);
        // ctx.lineTo(135, 80);
        // ctx.lineTo(90, 80);
        // ctx.lineTo(110, 80);
        //ctx.lineTo(20, 110);
        //不要实心,空心三角形
        // ctx.closePath();
        // ctx.stroke();

        ctx.beginPath();
        ctx.arc(120, 120, 60, 0, 2 * Math.PI);
        ctx.moveTo(120, 60);
        ctx.lineTo(110, 100);
        ctx.lineTo(62, 100);
        ctx.lineTo(100, 120);
        ctx.lineTo(78, 160);
        ctx.lineTo(120, 130);
        ctx.lineTo(162, 160);
        ctx.lineTo(140, 120);
        ctx.lineTo(178, 100);
        ctx.lineTo(130, 100);
        ctx.closePath();
        ctx.stroke();
    } else {
        alert("你的浏览器不支持canvas功能");
    }
</script>

</html>
</script>

</html>